WebGL-i sampler-objektid: peeneteraline tekstuuride filtreerimise ja mähkimise juhtimine

WebGL-is on tekstuurid hädavajalikud 3D-stseenidele visuaalse detailsuse ja realismi lisamiseks. Kuigi tekstuuride põhikäyttö on lihtne, nõuab optimaalse visuaalse kvaliteedi ja jõudluse saavutamine sageli peeneteralist kontrolli selle üle, kuidas tekstuure sämplitakse. WebGL-i sampler-objektid pakuvad seda kontrolli, võimaldades teil iseseisvalt seadistada tekstuuri filtreerimise ja mähkimise režiime, mis viib parema visuaalse täpsuse ja potentsiaalselt parema jõudluseni.

Mis on sampler-objektid?

Sampler-objektid on WebGL-i objektid, mis kapseldavad tekstuuri sämplimise parameetreid, nagu filtreerimine (suurendamine ja vähendamine) ja mähkimisrežiimid (kuidas tekstuure korratakse või piiratakse nende servadest). Enne sampler-objekte seati need parameetrid otse tekstuuri objektile endale, kasutades gl.texParameteri. Sampler-objektid eraldavad need sämplimise parameetrid tekstuuri andmetest, pakkudes mitmeid eeliseid:

• Koodi selgus ja organiseeritus: Sämplimise parameetrid on grupeeritud ühte objekti, mis muudab koodi lihtsamini loetavaks ja hooldatavaks.
• Taaskasutatavus: Sama sampler-objekti saab kasutada mitme tekstuuriga, vähendades liiasust ja lihtsustades muudatuste tegemist. Kujutage ette stsenaariumi, kus soovite samu mipmapping'u seadeid kõigile oma taevakasti tekstuuridele. Sampler-objektiga peate seadeid muutma ainult ühes kohas.
• Jõudluse optimeerimine: Mõnel juhul saavad draiverid sampler-objektide kasutamisel tekstuuri sämplimist tõhusamalt optimeerida. Kuigi see pole garanteeritud, on see potentsiaalne eelis.
• Paindlikkus: Erinevad objektid saavad kasutada sama tekstuuri erinevate sämplimise parameetritega. Näiteks võib maastiku renderdamine kasutada anisotroopset filtreerimist lähivaate detailide jaoks ja trilineaarset filtreerimist kaugvaadete jaoks, kõik sama kõrguskaardi tekstuuriga, kuid erinevate sampler-objektidega.

Sampler-objektide loomine ja kasutamine

Sampler-objekti loomine

Sampler-objekti loomine on lihtne, kasutades gl.createSampler() meetodit:

            const sampler = gl.createSampler();

            

              
                Copy
              
            
          

Kui gl.createSampler() tagastab null, siis tõenäoliselt brauser ei toeta seda laiendust. Kuigi sampler-objektid on osa WebGL 2-st, on neile WebGL 1-s juurdepääs EXT_texture_filter_anisotropic laienduse kaudu.

Sampler'i parameetrite seadistamine

Kui teil on sampler-objekt olemas, saate selle filtreerimise ja mähkimise režiime seadistada, kasutades gl.samplerParameteri():

            gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);

            

              
                Copy
              
            
          

Vaatame need parameetrid lähemalt üle:

• gl.TEXTURE_MIN_FILTER: Määrab, kuidas tekstuuri filtreeritakse, kui renderdatud objekt on väiksem kui tekstuur. Valikud on järgmised:
• gl.NEAREST: Lähima naabri filtreerimine (kiireim, kuid kandiline).
• gl.LINEAR: Bilineaarne filtreerimine (siledam kui lähima naabri filtreerimine).
• gl.NEAREST_MIPMAP_NEAREST: Lähima naabri filtreerimine, kasutab lähimat mipmap-taset.
• gl.LINEAR_MIPMAP_NEAREST: Bilineaarne filtreerimine, kasutab lähimat mipmap-taset.
• gl.NEAREST_MIPMAP_LINEAR: Lähima naabri filtreerimine, interpoleerib lineaarselt kahe mipmap-taseme vahel.
• gl.LINEAR_MIPMAP_LINEAR: Trilineaarne filtreerimine (kõige sujuvam mipmapping).
• gl.TEXTURE_MAG_FILTER: Määrab, kuidas tekstuuri filtreeritakse, kui renderdatud objekt on suurem kui tekstuur. Valikud on järgmised:
• gl.NEAREST: Lähima naabri filtreerimine.
• gl.LINEAR: Bilinearne filtreerimine.
• gl.TEXTURE_WRAP_S: Määrab, kuidas tekstuuri mähitakse piki S (U või X) koordinaati. Valikud on järgmised:
• gl.REPEAT: Tekstuur kordub sujuvalt. See on kasulik plaaditavate tekstuuride jaoks nagu muru või telliskiviseinad. Kujutage ette munakivitekstuuri, mis on rakendatud teele - gl.REPEAT tagaks, et munakivid korduksid lõputult mööda teepinda.
• gl.MIRRORED_REPEAT: Tekstuur kordub, kuid iga kordus on peegelpildis. See võib olla kasulik teatud tekstuuride puhul õmbluste vältimiseks. Mõelge tapeedimustrile, kus peegeldamine aitab servi sulandada.
• gl.CLAMP_TO_EDGE: Tekstuuri koordinaadid on piiratud tekstuuri servaga. See takistab tekstuuri kordumist ja võib olla kasulik tekstuuridele, mis ei tohiks plaaditud olla, näiteks taevas või veepinnad.
• gl.TEXTURE_WRAP_T: Määrab, kuidas tekstuuri mähitakse piki T (V või Y) koordinaati. Valikud on samad, mis gl.TEXTURE_WRAP_S puhul.

Sampler-objekti sidumine

Et kasutada sampler-objekti koos tekstuuriga, peate selle siduma tekstuuriüksusega. WebGL-il on mitu tekstuuriüksust, mis võimaldab teil kasutada mitut tekstuuri ühes shaderis. Meetod gl.bindSampler() seob sampler-objekti konkreetse tekstuuriüksusega:

            const textureUnit = 0; // Valige tekstuuriüksus (WebGL2-s 0-31, WebGL1-s tavaliselt vähem)
gl.activeTexture(gl.TEXTURE0 + textureUnit); // Aktiveerige tekstuuriüksus
gl.bindTexture(gl.TEXTURE_2D, texture); // Siduge tekstuur aktiivse tekstuuriüksusega
gl.bindSampler(textureUnit, sampler); // Siduge sampler tekstuuriüksusega

            

              
                Copy
              
            
          

Tähtis: Veenduge, et aktiveerite õige tekstuuriüksuse (kasutades gl.activeTexture) enne nii tekstuuri kui ka sampleri sidumist.

Sampler'i kasutamine shaderis

Oma shaderis vajate tekstuuri juurde pääsemiseks sampler2D uniform-muutujat. Samuti peate määrama tekstuuriüksuse, millega tekstuur ja sampler on seotud:

            // Tipu shader
attribute vec2 a_texCoord;
varying vec2 v_texCoord;

void main() {
  v_texCoord = a_texCoord;
  gl_Position = ...; // Teie tipu asukoha arvutus
}

// Fragmendi shader
precision mediump float;
uniform sampler2D u_texture;
varying vec2 v_texCoord;

void main() {
  gl_FragColor = texture2D(u_texture, v_texCoord); // Sämplige tekstuuri
}

            

              
                Copy
              
            
          

Oma JavaScripti koodis määrake u_texture uniform-muutuja õigele tekstuuriüksusele:

            const textureUniformLocation = gl.getUniformLocation(program, "u_texture");
gl.uniform1i(textureUniformLocation, textureUnit); // Määrake uniform-muutuja tekstuuriüksusele

            

              
                Copy
              
            
          

Näide: Tekstuuri filtreerimine mipmap'idega

Mipmap'id on eelnevalt arvutatud, madalama resolutsiooniga versioonid tekstuurist, mida kasutatakse jõudluse parandamiseks ja alias-efekti vähendamiseks kaugel asuvate objektide renderdamisel. Demonstreerime, kuidas seadistada mipmapping'ut sampler-objekti abil.

            // Looge tekstuur
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// Laadige üles tekstuuriandmed (nt pildilt)
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

// Genereerige mipmap'id
gl.generateMipmap(gl.TEXTURE_2D);

// Looge sampler-objekt
const sampler = gl.createSampler();

// Seadistage sampler trilineaarseks filtreerimiseks (parim kvaliteet)
gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Seadistage mähkimine (nt kordus)
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.REPEAT);

// Siduge tekstuur ja sampler
const textureUnit = 0;
gl.activeTexture(gl.TEXTURE0 + textureUnit);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(textureUnit, sampler);

// Määrake tekstuuri uniform-muutuja shaderis
const textureUniformLocation = gl.getUniformLocation(program, "u_texture");
gl.uniform1i(textureUniformLocation, textureUnit);

            

              
                Copy
              
            
          

Ilma mipmapping'u või korraliku filtreerimiseta võivad kauged tekstuurid paista udused või alias-efektiga. Trilineaarne filtreerimine (gl.LINEAR_MIPMAP_LINEAR) annab kõige sujuvamad tulemused, interpoleerides lineaarselt mipmap-tasemete vahel. Kindlasti kutsuge välja gl.generateMipmap tekstuuril pärast esialgsete tekstuuriandmete üleslaadimist.

Näide: Anisotroopne filtreerimine

Anisotroopne filtreerimine on tekstuuri filtreerimise tehnika, mis parandab järskude nurkade alt vaadeldavate tekstuuride visuaalset kvaliteeti. See vähendab udusust ja artefakte, mis võivad tekkida standardse mipmapping'uga. Anisotroopse filtreerimise kasutamiseks on vaja laiendust EXT_texture_filter_anisotropic.

            // Kontrollige anisotroopse filtreerimise laienduse olemasolu
const ext = gl.getExtension('EXT_texture_filter_anisotropic') || gl.getExtension('MOZ_EXT_texture_filter_anisotropic') || gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic');

if (ext) {
  // Hankige riistvara poolt toetatud maksimaalne anisotroopia väärtus
  const maxAnisotropy = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);

  // Looge tekstuur
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Laadige üles tekstuuriandmed
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

  // Genereerige mipmap'id
  gl.generateMipmap(gl.TEXTURE_2D);

  // Looge sampler-objekt
  const sampler = gl.createSampler();

  // Seadistage sampler trilineaarseks ja anisotroopseks filtreerimiseks
  gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.samplerParameterf(sampler, ext.TEXTURE_MAX_ANISOTROPY_EXT, maxAnisotropy); // Kasutage maksimaalset toetatud anisotroopiat

  // Seadistage mähkimine
  gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.REPEAT);

  // Siduge tekstuur ja sampler
  const textureUnit = 0;
gl.activeTexture(gl.TEXTURE0 + textureUnit);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(textureUnit, sampler);

  // Määrake tekstuuri uniform-muutuja shaderis
  const textureUniformLocation = gl.getUniformLocation(program, "u_texture");
gl.uniform1i(textureUniformLocation, textureUnit);
}

            

              
                Copy
              
            
          

Selles näites kontrollime esmalt anisotroopse filtreerimise laienduse olemasolu. Seejärel saame riistvara poolt toetatud maksimaalse anisotroopia väärtuse, kasutades gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT). Lõpuks seame sampler-objektile parameetri ext.TEXTURE_MAX_ANISOTROPY_EXT, kasutades gl.samplerParameterf.

Anisotroopne filtreerimine on eriti kasulik tekstuuridele, mida rakendatakse järsu nurga all vaadeldavatele pindadele, näiteks teedele või põrandatele, mida vaadatakse ülevalt.

Näide: Servale piiramine (Clamping to Edge) taevakastide jaoks

Taevakastid kasutavad sageli kuupkaarte (cube maps), kus kuus tekstuuri esindavad ümbritseva kuubi erinevaid tahke. Taevakasti servade sämplimisel soovite tavaliselt vältida tekstuuri kordumist. Siin on, kuidas kasutada gl.CLAMP_TO_EDGE koos sampler-objektiga:

            // Eeldades, et teil on kuupkaardi tekstuur (cubeTexture)

// Looge sampler-objekt
const sampler = gl.createSampler();

// Seadistage filtreerimine
gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Seadistage mähkimine servale piiramiseks
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE); // Kuupkaartide puhul peate piirama ka R-koordinaati

// Siduge tekstuur ja sampler
const textureUnit = 0;
gl.activeTexture(gl.TEXTURE0 + textureUnit);
gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeTexture);
gl.bindSampler(textureUnit, sampler);

// Määrake tekstuuri uniform-muutuja shaderis (samplerCube uniform'i jaoks)
const textureUniformLocation = gl.getUniformLocation(program, "u_skybox");
gl.uniform1i(textureUniformLocation, textureUnit);

            

              
                Copy
              
            
          

Kuupkaartide puhul peate määrama nii gl.TEXTURE_WRAP_R kui ka gl.TEXTURE_WRAP_S ja gl.TEXTURE_WRAP_T. Servale piiramine hoiab ära õmbluste või artefaktide tekkimise kuupkaardi tahkude servades.

WebGL1 kaalutlused

Kuigi sampler-objektid on WebGL2 põhifunktsioon, on need WebGL1-s saadaval laienduste kaudu, nagu EXT_texture_filter_anisotropic. Enne sampler-objektide kasutamist peate kontrollima ja lubama laienduse. Põhiprintsiibid jäävad samaks, kuid peate tegelema laienduse kontekstiga.

Jõudlusega seotud kaalutlused

Kuigi sampler-objektid võivad pakkuda potentsiaalseid jõudluseeliseid, on oluline arvestada järgnevaga:

• Keerukus: Keerukate filtreerimistehnikate, nagu anisotroopne filtreerimine, kasutamine võib olla arvutuslikult kulukas. Profileerige oma koodi, et veenduda, et need tehnikad ei mõjuta negatiivselt jõudlust, eriti madalama jõudlusega seadmetes.
• Tekstuuri suurus: Suuremad tekstuurid nõuavad rohkem mälu ja nende sämplimine võib võtta kauem aega. Optimeerige tekstuuri suurusi, et minimeerida mälukasutust ja parandada jõudlust.
• Mipmapping: Kasutage alati mipmap'e kaugel asuvate objektide renderdamisel. Mipmapping parandab oluliselt jõudlust ja vähendab alias-efekti.
• Platvormipõhised optimeerimised: Erinevatel platvormidel ja seadmetel võivad olla erinevad jõudlusnäitajad. Katsetage erinevate filtreerimis- ja mähkimisrežiimidega, et leida oma sihtrühmale optimaalsed seaded. Näiteks võivad mobiilseadmed saada kasu lihtsamatest filtreerimisvalikutest.

Parimad praktikad

• Kasutage sampler-objekte järjepidevaks sämplimiseks: Grupeerige seotud sämplimisparameetrid sampler-objektidesse, et edendada koodi taaskasutust ja hooldatavust.
• Profileerige oma koodi: Kasutage WebGL-i profileerimisvahendeid, et tuvastada tekstuuri sämplimisega seotud jõudluse kitsaskohti.
• Valige sobivad filtreerimisrežiimid: Valige filtreerimisrežiimid, mis tasakaalustavad visuaalset kvaliteeti ja jõudlust. Trilineaarne filtreerimine ja anisotroopne filtreerimine pakuvad parimat visuaalset kvaliteeti, kuid võivad olla arvutuslikult kulukad.
• Optimeerige tekstuuri suurusi: Kasutage tekstuure, mis ei ole vajalikust suuremad. Kahe astme suurusega tekstuurid (nt 256x256, 512x512) võivad mõnikord pakkuda paremat jõudlust.
• Arvestage kasutaja seadetega: Pakkuge kasutajatele võimalusi tekstuuri filtreerimise ja kvaliteedi seadete reguleerimiseks, et optimeerida jõudlust nende seadmetes.
• Vigade käsitlemine: Kontrollige alati laienduste tuge ja käsitlege vigu sujuvalt. Kui konkreetset laiendust ei toetata, pakkuge varumehhanismi.

Kokkuvõte

WebGL-i sampler-objektid pakuvad võimsaid tööriistu tekstuuri filtreerimise ja mähkimise režiimide juhtimiseks. Neid tehnikaid mõistes ja kasutades saate oluliselt parandada oma WebGL-i rakenduste visuaalset kvaliteeti ja jõudlust. Olenemata sellest, kas arendate realistlikku 3D-mängu, andmete visualiseerimise tööriista või interaktiivset kunstinstallatsiooni, võimaldab sampler-objektide valdamine luua vapustavaid ja tõhusaid visuaale. Pidage alati meeles jõudlusega seotud tagajärgi ja kohandage oma seadeid vastavalt rakenduse ja sihtriistvara spetsiifilistele vajadustele.